<!-- this.$emit('getClickDate',this.date) -->
<!-- 传入getClickDate函数用于获取当前日期 -->
<!--仅在uni中可使用-->

<template>
  <div class="dayChoice">
    <div class="bg"></div>
    <scroll-view class="scroll-view" scroll-x="true" show-scrollbar="false">
      <div class="content">
        <div>
          <div
            id="demo1"
            class="scroll-view-item_H"
            v-for="(item, index) in dayTime"
            :key="item.time"
          >
            <div class="itemBox" @click="choiceOneDay(item)">
              <div v-show="id != item.time" class="day">
                {{ item.day }}
              </div>
              <div v-show="id === item.time" class="blueday">
                {{ item.day }}
              </div>
              <div v-show="id != item.time" class="time">
                {{ item.time }}
              </div>
              <div v-show="id === item.time" class="bluetime">
                {{ item.time }}
              </div>
              <div v-show="id != item.time" class="bottom"></div>
              <div v-show="id === item.time" class="bluebottom"></div>
            </div>
          </div>
        </div>
      </div>
    </scroll-view>
  </div>
</template>

<script>
export default {
  props: [],
  data() {
    return {
      dayTime: [
        {
          day: "今天",
          time: new Date().valueOf(),
          id: "0",
        },
      ],
      id: "0",
      date: {},
    };
  },
  methods: {
    choiceOneDay(item) {
      this.id = item.time;
      this.date = item;
      //返回数据
      try {
        if (this.getClickDate) {
          this.$emit("getClickDate", this.date);
        } else {
          console.log(this.date, "请传入getClickDate函数用于接收日期（对象）");
          return this.date;
        }
      } catch (e) {
        return e;
      }
    },
    //获取今天的日期
    getTime(i = 0, type) {
      let now_date = new Date();
      let aa = now_date.setDate(now_date.getDate() + i);
      return this.changeDateType(new Date(aa), type);
    },
    //获
    //日期转格式
    changeDateType(date, type) {
      //使用week类型
      if (type === "week") {
        //判断是否为今天
        if (new Date(date).toDateString() === new Date().toDateString()) {
          return "今天";
        } else {
          //返回是周几
          return this.getWeek(date);
        }
      } else if (type === "realDate") {
        return (
          date.getFullYear() +
          "-" +
          (date.getMonth() + 1) +
          "-" +
          (date.getDate() >= 10 ? date.getDate() : "0" + date.getDate())
        );
      } else {
        //为几月几日类型
        let day = new Date(date).getDate().toString();
        let month = new Date(date).getMonth() - 0 + 1;
        if (day.length < 2) {
          let newDay = "0" + day;
          return month + "." + newDay;
        } else {
          return month + "." + day;
        }
      }
    },
    //判断时间为星期几
    getWeek(date) {
      let fnTime = new Date(date).getDay();
      let week;
      switch (fnTime) {
        case 0:
          week = "周日";
          break;
        case 1:
          week = "周一";
          break;
        case 2:
          week = "周二";
          break;
        case 3:
          week = "周三";
          break;
        case 4:
          week = "周四";
          break;
        case 5:
          week = "周五";
          break;
        case 6:
          week = "周六";
          break;
      }
      return week;
    },
  },
  created() {
    for (let i = 0; i < 15; i++) {
      this.$set(this.dayTime, i, {
        day: this.getTime(i, "week"),
        time: this.getTime(i),
        value: this.getTime(i, "realDate"),
      });
    }
    this.id = this.dayTime[0].time;
    this.date = this.dayTime[0];
    // console.log(this.date)
    // getFreeTime({serviceTime:this.date})
  },
};
</script>

<style lang="less" scoped>
.dayChoice {
  width: 100%;
  background-color: #f8f8f8;
  position: relative;

  .bg {
    height: 110rpx;
    background: #ffffff;
    box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.06);
    border-radius: 0px 0px 16rpx 16rpx;
  }

  .scroll-view {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    width: 100%;

    .content {
      width: 100%;
      border-radius: 0px 0px 16rpx 16rpx;
      border-top: 2rpx solid #f7f7f7;

      .scroll-view-item_H {
        display: inline-block;
        text-align: center;
        width: 116rpx;
        font-size: 24rpx;

        .itemBox {
          display: flex;
          flex-direction: column;
          align-items: center;
          // padding-top: 24rpx;
          height: 108rpx;

          .day {
            font-size: 24rpx;
            color: #333333;
            font-weight: 400;
            margin-bottom: 8rpx;
          }

          .blueday {
            font-size: 24rpx;
            color: #15a177;
            font-weight: 400;
            margin-bottom: 8rpx;
          }

          .time {
            color: #333333;
            font-weight: 400;
            font-size: 28rpx;
            margin-bottom: 22rpx;
          }

          .bluetime {
            color: #15a177;
            font-weight: 500;
            font-size: 28rpx;
            // margin-bottom: 22rpx;
          }

          .bottom {
            width: 40rpx;
            border: 2rpx;
            margin-top: 8rpx;
          }

          .bluebottom {
            width: 40rpx;
            border: 4rpx solid #15a177;
            border-radius: 4rpx;
            margin-top: 22rpx;
          }
        }
      }
    }
  }
}

/deep/.uni-scroll-view {
  background-color: #fff;
}

/deep/.uni-scroll-view::-webkit-scrollbar {
  /* 隐藏滚动条，但依旧具备可以滚动的功能 */
  display: none;
}
</style>
